.v-popper__popper.v-popper--theme-tooltip {
  $triangle-size: 8px;
  $triangle-inner-size: $triangle-size - 1px;
  $center: calc(50% - #{$triangle-size});

  display: block !important;
  z-index: z-index('tooltip');
  max-width: 50vw;

  .v-popper__inner {
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    border-radius: var(--border-radius);
    padding: 8px;
  }

  .v-popper__arrow-container {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    position: absolute;
    z-index: 1;

    .v-popper__arrow-inner {
      border: $triangle-inner-size solid transparent;
    }
  }

  &[data-popper-placement^="top"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-bottom-width: 0;
        border-top-color: var(--tooltip-bg);
        left: -$triangle-inner-size;
      }
    }
  }


  &[data-popper-placement^="bottom"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-top-width: 0;
        border-bottom-color: var(--tooltip-bg);
        left: -$triangle-inner-size;
        background: transparent;
      }
    }
  }

  &[data-popper-placement^="right"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-right-color: var(--tooltip-bg);
        top: -$triangle-inner-size;
        border-left-width: 0;
      }
    }
  }

  &[data-popper-placement^="left"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-right-width: 0;
        border-left-color: var(--tooltip-bg);
        top: -$triangle-inner-size;
      }
    }
  }

  &.tooltip-warning {
    .v-popper__inner {
      background: var(--tooltip-bg-warning);
      color: var(--tooltip-text-warning);
    }

    &[data-popper-placement^="top"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-top-color: var(--tooltip-bg-warning);
        }
      }
    }


    &[data-popper-placement^="bottom"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-bottom-color: var(--body-bg);
        }
      }
    }

    &[data-popper-placement^="right"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-right-color: var(--tooltip-bg-warning);
        }
      }
    }

    &[data-popper-placement^="left"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-left-color: var(--tooltip-bg-warning);
        }
      }
    }
  }
}

.v-popper__popper {
  $color: var(--popover-bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);

  .v-popper__inner {
    background: $color;
    color: var(--popover-text);
    padding: 10px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px var(--shadow);
    border: none;

    a {
      color: var(--popover-text);
    }
  }

  .v-popper__arrow-container {
    border-color: transparent;
  }
}

.v-popper {
  display: inline;
}

.v-popper__popper.v-popper--theme-tooltip,
.v-popper {
  &[aria-hidden='true'] {
    // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
    // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}

//icon tooltip
.icon-info.v-popper--has-tooltip {
  font-size: 14px;
}